import React from 'react';
import classnames from 'classnames';
import {
  FontAwesomeIcon,
  FontAwesomeIconProps,
} from '@fortawesome/react-fontawesome';

import { fas } from '@fortawesome/free-solid-svg-icons';

import { library } from '@fortawesome/fontawesome-svg-core';

library.add(fas);
export type ThemeProps =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'info'
  | 'warning'
  | 'danger'
  | 'light'
  | 'dark';

export interface IconProps extends FontAwesomeIconProps {
  theme?: ThemeProps;
}

const Icon: React.FC<IconProps> = ({ className, theme, ...props }) => {
  const classes = classnames('icon', className, {
    [`icon-${theme}`]: theme,
  });

  return (
    <span className={classes}>
      <FontAwesomeIcon {...props} />
    </span>
  );
};

Icon.displayName = 'Icon';

export default Icon;
